<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <!--引入ElementUI的css文件-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!--引入vue和ElementUI的js文件-->
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
        <!--
             @size-change="handleSizeChange"  每页条数发生变化触发的事件
             @current-change="handleCurrentChange"  当前页发生变化触发的事件
            :current-page="currentPage"  当前页数
            :page-sizes="[100, 200, 300, 400]":下拉列表中展示的每页条数
            :total="total"：总记录数
            :page-size="100":每页条数
             layout="total, sizes, prev, pager, next, jumper"：
                        表示 共多少页、每页条数下拉框、上一页、页面、下一页、前往多少页
        -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total">  <!--总页数-->
        </el-pagination>
    </div>

    <script>
        new Vue({
            el:"#div",
            data:{
                pagination:{
                    currentPage:1,
                    pageSize:10,
                    total:100
                }
            },
            methods: {
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                }
            },
        });
    </script>
</body>
</html>